<template>
  <div>
    <el-card>
      <template #header>
        <el-button type="primary">添加新分类</el-button>
      </template>
      <!-- row-key 取值数据结构中每行数据对应的对象中的唯一取值属性名称 -->
      <el-table :data="categories" row-key="cat_id" border height="scorll" size="small" :tree-props="{ children:'children' }">
        <template v-slot:empty>
          <el-empty description="查无数据"></el-empty>
        </template>
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <el-table-column label="是否有效">
          <template #default>
            aa
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template #default>
            aa
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default>
            <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="params.pagesize"
        :current-page="params.pagenum"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [],
      total:0,
      params:{
        type:"",
        pagenum:1,
        pagesize:5
      }
    };
  },
  methods:{
    async loadCategoriesList(){
      let result = await this.$api.getCategoriesList(this.params)
      // console.log(result);
      this.total = result.total
      this.categories = result.result
    }
  },
  created(){
    this.loadCategoriesList();
  }
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body) {
    flex-grow: 1;
    padding-bottom: 70px;
    overflow: hidden;
  }
}
// :deep(.el-table__body-wrapper){
//   height: 100%!important;
// }
.el-table{
  height: 100%;
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>